<template>
  <view class="pay-wrap">
    <view class="showModle"></view>
    <view v-show="payContantShow" class="contant">
      <view class="head">
        <image src="/static/img/prve.png" class="back" @click="goback()"></image>
        结算
      </view>
      <view class="set_main">
        <image class="pay-hide" src="../../static/img/hide.png" @click="goback()"></image>
        <view class="set_title flex">
          <view>{{ tableNum }}</view>
          <image class="set_price_icon" src="/static/img/m.png"></image>
          <view>{{ totalPrice }}</view>
        </view>
        <view class="set_cont">
          <view class="set_tip">选择支付方式</view>
          <view v-if="payType == 'integral'" class="set_items flex">
            <view class="set_item integral-item" @click="payIntegralOrder()">
              <image class="set_icon" src="../../static/img/xj.png"></image>
              <view class="set_txt">积分支付</view>
            </view>
          </view>
          <view v-else class="set_items flex">
            <view class="set_item" v-for="(item, index) in items" :key="index" @click="payOrder(item.type)">
              <image class="set_icon" :src="item.url"></image>
              <view class="set_txt">{{ item.name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <image v-show="payWxQrcode" class="wx_hide" src="../../static/img/hide.png" @click="clickHide"></image>
    <view v-show="payWxQrcode" class="wx-qrcode">
      <image class="qr-img" :src="qrcodeImg"></image>
      <view class="qr-tip">{{ qrcodeTxt }}</view>
    </view>
  </view>
</template>

<script>
import { PAY_POST, PAY_PAYLOGIN_QRCODE, ORDER_STATUS, PAY_QRCODE, ORDER_LIST, PAY_INTEGRAL } from '@/api';
import goodsMixin from '@/mixins/goods.js'
export default {
  name: 'Paylist',
  props: {
    payType: {
      default: 'general',
      type: String
    }
  },
  mixins: [goodsMixin],
  data() {
    return {
      payContantShow: true,
      payWxQrcode: false,
      tableNum: this.$store.state.storeConf.table_number,
      tableId: this.$store.state.storeConf.table_id, deviceNum: this.$store.state.storeConf.device_num,
      storeId: this.$store.state.storeConf.store_id,
      items: [
        //1微信支付 2支付宝支付 3余额支付 4刷卡支付 5现金支付
        { url: '/static/img/zfb.png', name: '支付宝', type: 2 },
        { url: '/static/img/wx.png', name: '微信支付', type: 1 },
        { url: '/static/img/vip.png', name: '会员支付', type: 3 },
        { url: '/static/img/xj.png', name: '现金支付', type: 5 },
        { url: '/static/img/yhk.png', name: '银行卡', type: 4 }
      ],
      payLoginStatus: null,
      qrcodeImg: 'http://images.wkbar.nbxinyitec.com/uploads/login/qrcode/c1f3b5744ec3da9790404151b4ad5af2.png',
      qrcodeTxt: '',
      totalPrice: 0,
      orderNo: null
    };
  },
  mounted() {
    this.getCartData();
  },
  methods: {
    // 积分支付
    payIntegralOrder() {
      let that = this
      let qsData = {
        table_id: that.tableId,
        device_num: that.deviceNum,
        store_id: that.storeId,
        order_no: that.orderNo,
        user_id: that.$storage.get('userId', false)
      }
      that.$_post(PAY_INTEGRAL, qsData, { isJson: false }).then(res => {
        if (res.code === 1) {
          that.payWxQrcode = false;
          that.payContantShow = false;
          that.$emit('payHide', false);
          that.getCartList(that.tableId, that.storeId)
          that.getIntegralCartList(that.tableId, that.storeId)
          that.$common.modelShow('支付提示', res.msg, function(that) {
            uni.navigateTo({
              url: '/pages/index/index',
              animationType: 'pop',
              animationDuration: 500
            });
          }, false);
        } else {
          that.$common.modelShow('支付提示', res.msg, function(that) {}, false)
        }
      })
    },
    getCartData() {
      let totalPrice = this.$storage.get('orderPrice', false)
      this.orderNo = this.$storage.get('orderNo', false)
      this.totalPrice = totalPrice && JSON.parse(totalPrice)
    },
    goback(){
      this.$emit('payHide', false);
    },
    clickHide() {
      clearInterval(this.payStatus)
      this.payWxQrcode = false;
      this.payContantShow = true;
    },
    payOrder(type) {
      // 1微信支付 2支付宝支付 3余额支付 4刷卡支付 5现金支付
      let that = this;
      if (type === 1 || type === 2 || type === 3) {
        // 1 微信支付 2 支付宝支付 3 余额支付
        that.payWithWx(type);
      } else {
        let typeName = type === 4 ? '刷卡支付' : '现金支付'
        that.payWithCard(type, typeName)
        // that.$common.modelShow(typeName, '请联系店员进行支付', function() {}, false);
      }
    },
    // 刷卡支付 || 现金支付
    payWithCard (type, typeName) {
      let that = this
      let qsData = {
        table_id: that.tableId,
        device_num: that.deviceNum,
        store_id: that.storeId,
        order_no: that.orderNo,
        pay_type: type
      }
      that.$_post(PAY_POST, qsData, { isJson: false }).then(res => {
        // console.log(res)
        if (res.code === 1) {
          that.payWxQrcode = false;
          that.payContantShow = false;
          that.$emit('payHide', false);
          that.getCartList(that.tableId, that.storeId)
          that.getIntegralCartList(that.tableId, that.storeId)
          that.$common.modelShow('支付提示', res.msg, function(that) {
            uni.navigateTo({
              url: '/pages/index/index',
              animationType: 'pop',
              animationDuration: 500
            });
          }, false);
        } else {
          that.$common.modelShow('支付提示', res.msg, function(that) {}, false);
        }
      })
    },
    // 微信支付
    payWithWx(type) {
      let that = this;
      that
        .$_get(PAY_PAYLOGIN_QRCODE, {
          table_id: that.tableId,
          device_num: that.deviceNum,
          store_id: that.storeId,
          pay_type: type
        })
        .then(res => {
          if (res.code === 1) {
            that.qrcodeImg = res.data;
            if (type === 1 || type === 3) {
              that.qrcodeTxt = '微信扫一扫支付';
            } else if (type === 2) {
              that.qrcodeTxt = '支付宝扫一扫支付';
            }

            that.payWxQrcode = true;
            that.payContantShow = false;
            that.payStatus = setInterval(this.getPayStatus, 2000);
          } else {
          }
        });
    },
    // 获取订单支付结果
    getPayStatus() {
      let that = this;
      that
        .$_get(ORDER_STATUS, {
          table_id: that.tableId,
          device_num: that.deviceNum,
          store_id: that.storeId
        })
        .then(res => {
          if (res.code === 1 && res.data) {
            that.payWxQrcode = false;
            that.payContantShow = false;
            clearInterval(that.payStatus)
            that.getCartList(that.tableId, that.storeId)
            that.getIntegralCartList(that.tableId, that.storeId)
            that.$common.successToShow('支付成功', function(that) {
              uni.navigateTo({
                url: '/pages/index/index',
                animationType: 'pop',
                animationDuration: 500
              });
            })
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.head {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  right: 0;
  height: 5vw;
  line-height: 5vw;
  background: #333333;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
}
.back {
  position: absolute;
  width: 3vw;
  height: 3vw;
  top: 1vw;
  left: 3vw;
  z-index: 10;
}
.contant{
  position: relative;
}
.set_main {
  width: 68vw;
  height: 48vw;
  border-radius: 10px;
  background: #ffffff;
  position: fixed;
  z-index: 9;
  top: 50%;
  left: 50%;
  margin-top: -24vw;
  margin-left: -34vw;
}
.set_title {
  line-height: 6vw;
  height: 6vw;
  justify-content: center;
  font-size: 20px;
  align-items: center;
  border-bottom: 10px solid #f5f4f4;
}
.set_price_icon {
  margin: 0 10px;
  width: 3vw;
  height: 3vw;
}
.set_tip {
  line-height: 5vw;
  font-size: 15px;
  box-sizing: border-box;
  padding: 0 24px;
}
.set_items {
  padding: 10px 48px;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.set_item {
  text-align: center;
  border-right: 1px solid #e3e3e3;
  width: 198px;
  margin-top: 3vw;
  margin-bottom: 3vw;
  &:nth-child(3n) {
    border-right: none;
  }
}
.set_icon {
  width: 6vw;
  height: 6vw;
}
.set_txt {
  font-size: 15px;
  margin-top: 4px;
}
.wx_hide {
  background: #ffffff;
  z-index: 10;
  width: 2vw;
  height: 2vw;
  border-radius: 50%;
  position: fixed;
  top: 20vh;
  right: 30vw;
  padding: 1vw;
  box-shadow: 1px 1px 5px 2px rgba(88,88,88,.6);
}
.pay-hide{
  background: #ffffff;
  z-index: 10;
  width: 2vw;
  height: 2vw;
  border-radius: 50%;
  position: absolute;
  top: -1vw;
  right: -1vw;
  padding: 1vw;
  box-shadow: 1px 1px 5px 2px rgba(88,88,88,.6);
}
.wx-qrcode {
  background-color: #fff;
  z-index: 10;
  width: 300px;
  height: 340px;
  padding: 20px;
  border-radius: 10px;
  background: #ffffff;
  position: fixed;
  top: 50%;
  margin-top: -170px;
  left: 50%;
  margin-left: -150px;
  box-sizing: border-box;
  .qr-img {
    width: 260px;
    height: 260px;
  }
  .qr-tip {
    color: #333;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
  }
}
.integral-item{
  border-right: none;
  flex: 1;
  margin-top: 10vw;
}
</style>
